<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>折线图</title>
	</head>
	<body>
		<div id="main" style="width: 500px;height: 400px;"></div>
		<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts-en.common.min.js"></script>
		<script type="text/javascript">
			var myCharts = echarts.init(document.getElementById("main"));
			var option = {
				title:{
					text:"2017年某某统计",
					subtext:"本数据纯属虚构"
				},
				toolbox:{//工具箱
					feature:{//定义所需要用到的功能
						dataView:{//数据视图
							show:true
						},
						restore:{//还原
							show:true
						},
						dataZoom:{//区域放大缩小
							show:true
						},
						saveAsImage:{//保存图片
							show:true
						},
						magicType:{//切换图形类型
							type:['line','bar']
						}
					}
				},
				tooltip:{
					trigger:'axis',
					backgroundColor:'rgba(0,0,255,0.3)'
				},
				legend:{
					data:['销量']
				},
				xAxis:{
					data:['小米','大米','黑米','红米','黄米']
				},
				yAxis:{},
				series:[
					{
						name:"销量",
						type:"line",//定义折线图
						data:[3,15,35,12,55],
						markPoint:{
							data:[
								{type:"max",name:"最大值",symbol:"triangle"},
								{type:"min",name:"最小值"}
							]
						},
						markLine:{
							data:[
								{type:"average",name:"平均值"}
							]
						}
					}
				]
			}
			myCharts.setOption(option);
		</script>
	</body>
</html>
